<template>
<div>
  <q-carousel
    v-model="tab"
    transition-prev="scale"
    transition-next="scale"
    swipeable
    animated
    control-color="primary"
    control-type="regular"
    arrows
    class="blue shadow-1 rounded-borders full-height"
  >
    <q-carousel-slide name="message">
      <sage-table class="" backgroundColor="rgba(138,209,222,0.38)" headerColor="black" title="" :columns="columns" :rows="toolList" rowKey="customerNum">
        <template v-slot:leftTop>
          <q-toggle label="自动上料" v-model="auto" color="blue" class="text-black text-bold text-subtitle1" @update:modelValue="automaticUnload(auto)"/>
        </template>
        <template v-slot:operation="props">
          <div class="text-center q-gutter-x-sm">
            <q-btn label="修改" @click="modifyTools.show(props.value)"/>
            <q-btn label="复位" @click="restoration(props.value)"/>
          </div>
        </template>
        <template v-slot:auto="props">
          <q-toggle v-model="props.value.auto"  @update:modelValue="automaticShelf(props.value)"/>
        </template>
        <template v-slot:status="props">
          <span :class="statusColour[props.value.status]">{{statusOption[props.value.status]}}</span>
        </template>
        <template v-slot:workPoseName="props">
          <span v-if="props.value.workPoseName" @click="mapPoseDialogs.show(props.value)" class="bookTitle cursor-pointer">{{props.value.workPoseName}}</span>
          <q-btn v-else label="绑定点位" color="blue" flat class="text-bold" style="text-decoration: underline;" @click="mapPoseDialogs.show(props.value)"/>
        </template>
      </sage-table>
      <map-pose-dialog ref="mapPoseDialogs" poseType="" @update="getPoseId"/>
      <modify-tool ref="modifyTools" @update="getToolList"/>
    </q-carousel-slide>
    <q-carousel-slide name="state">
      <tool-state class="full-height full-width"/>
    </q-carousel-slide>
  </q-carousel>
</div>
</template>
<script setup>
import SageTable from 'components/ToolManagement/SageTable.vue'
import { ref, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import MapPoseDialog from 'components/ToolManagement/MapPoseDialog.vue'
import ModifyTool from 'components/ToolManagement/ModifyTool.vue'
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'
import ToolState from 'components/ToolManagement/ToolState.vue'

const columns = [
  { name: 'index', label: '序号', field: 'index' },
  { name: 'customerNum', label: '编号', field: 'customerNum' },
  { name: 'groupName', label: '组名', field: 'groupName' },
  { name: 'workPoseName', label: '工位名称', field: 'workPoseName' },
  { name: 'lastStartAt', label: '开始时间', field: 'lastStartAt' },
  { name: 'lastPlanFinishedAt', label: '计划结束时间', field: 'lastPlanFinishedAt' },
  { name: 'lastActualFinishedAt', label: '实际结束时间', field: 'lastActualFinishedAt' },
  { name: 'processingCycle', label: '加工时长', field: 'processingCycle' },
  { name: 'status', label: '状态', field: 'status' },
  { name: 'auto', label: '是否自动生产', field: 'auto' },
  { name: 'operation', label: '操作', field: 'operation' }
]
const toolList = ref([])
const tab = ref('message')

// 是否自动上架
const auto = ref(false)
const $q = useQuasar()
const mapPoseDialogs = ref()
const modifyTools = ref()
const statusOption = {
  error: '故障',
  offline: '离线',
  working: '加工中',
  idle: '初始化（物料）',
  load_goods: '上料中'
}
const statusColour = {
  error: 'text-red',
  offline: 'text-grey',
  working: 'text-green',
  idle: 'text-green',
  load_goods: 'text-green'
}

onMounted(() => {
  getToolList()
  getUnload()
})
function getUnload () {
  api.get(useAPIStore().taskUrl + 'task/status/unload').then(rs => {
    if (rs.data.code === 200) {
      auto.value = rs.data.data
    } else {
      $q.notify({ message: '机床信息获取失败', type: 'negative' })
    }
  })
}
// 获取机床信息
function getToolList () {
  api.get(useAPIStore().taskUrl + 'machine/data/all').then(rs => {
    if (rs.data.code === 200) {
      toolList.value = rs.data.data
      toolList.value.forEach(item => {
        if (item.auto === null) {
          item.auto = false
        }
      })
    } else {
      $q.notify({ message: '机床信息获取失败', type: 'negative' })
    }
  })
}
// 单个复位
function restoration (data) {
  $q.dialog({
    title: '复位',
    message: '是否要复位' + data.customerNum + '该机床？',
    cancel: true,
    persistent: true
  }).onOk(() => {
    api.get(useAPIStore().taskUrl + `machine/resetSingle?id=${data.id}`).then(rs => {
      if (rs.data.code === 200) {
        $q.notify({ message: rs.data.data, type: 'positive' })
      } else {
        $q.notify({ message: '机床信息获取失败', type: 'negative' })
      }
    })
  })
}
// 获取绑定得id
function getPoseId (data) {
  console.log(data)
}
// 自动上架修改
function automaticShelf (data) {
  $q.dialog({
    title: '自动生产',
    message: data.auto ? '是否' + '开启' + data.customerNum + '机床自动生产？' : '是否' + '关闭' + data.customerNum + '机床自动生产？',
    cancel: true,
    persistent: true
  }).onOk(() => {
    const tools = {
      id: data.id,
      auto: data.auto
    }
    api.put(useAPIStore().taskUrl + 'machine/data/update', tools).then(rs => {
      if (rs.data.code === 200) {
        $q.notify({
          message: data.auto ? data.customerNum + '自动生产开启成功' : data.customerNum + '自动生产关闭成功',
          type: 'positive'
        })
        getToolList()
      } else {
        $q.notify({ message: data.auto ? '自动生产开启失败！' : '自动生产关闭失败！', type: 'negative' })
      }
    })
  }).onCancel(() => {
    data.auto = !data.auto
  })
}
function automaticUnload (state) {
  $q.dialog({
    title: '自动上料',
    message: state ? '是否' + '开启自动上料？' : '是否' + '关闭自动上料？',
    cancel: true,
    persistent: true
  }).onOk(() => {
    if (state) {
      api.put(useAPIStore().taskUrl + 'task/start/unload').then(rs => {
        if (rs.data.code === 200) {
          $q.notify({ message: '自动上料开启成功！', type: 'positive' })
        } else {
          $q.notify({ message: '自动上料开启失败！', type: 'negative' })
        }
      })
    } else {
      api.put(useAPIStore().taskUrl + 'task/end/unload').then(rs => {
        if (rs.data.code === 200) {
          $q.notify({ message: '自动上料关闭成功！', type: 'positive' })
        } else {
          $q.notify({ message: '自动上料关闭失败！', type: 'negative' })
        }
      })
    }
  }).onCancel(() => {
    auto.value = !auto.value
  })
}
</script>
<style scoped>
.bookTitle {
  max-width: 10rem;
  overflow: hidden;
  text-decoration: underline;
}
</style>
